<template>
  <view class="wrap">
    <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType" label-position="left">
      <u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="150" label="姓名" prop="realName">
        <u-input :border="false" placeholder="请输入姓名" v-model="model.realName" type="text"></u-input>
      </u-form-item>
      <u-form-item label-width="150" label="性别" prop="sex">
        <u-input :border="false" type="select" :select-open="selectShow" v-model="model.sex" placeholder="请选择性别"
          @click="selectfirShow = true"></u-input>
        <u-action-sheet :list="selectfirList" v-model="selectfirShow" @click="selectfirCallback"></u-action-sheet>
      </u-form-item>
      <u-form-item label-width="150" label="年级" prop="grade">
        <u-input :border="false" placeholder="请选择年级" v-model="model.grade" type="select" @click="selectsecShow = true">
        </u-input>
        <u-action-sheet :list="selectsecList" v-model="selectsecShow" @click="selectsecCallback"></u-action-sheet>
      </u-form-item>
      <u-form-item label-width="150" label="学院" prop="college">
        <u-input :border="false" placeholder="请输入学院" v-model="model.college" type="text"></u-input>
      </u-form-item>
      <!-- <u-form-item label-width="150" label="专业" prop="specialize">
				<u-input :border="false" placeholder="请输入专业" v-model="model.specialize" type="text"></u-input>
			</u-form-item> -->
      <!-- <u-form-item   label-width="150" label="政治面貌" prop="polity_mask">
				<u-input :border="false" placeholder="请输入政治面貌" v-model="model.polity_mask" type="text"></u-input>
			</u-form-item> -->
      <!-- 			<u-form-item label="学院/专业" prop="region" label-width="150">
				<u-input :border="false" type="select" :select-open="pickerShow" v-model="model.region" placeholder="请选择地区" @click="pickerShow = true"></u-input>
			</u-form-item> -->
      <u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="kefu-ermai" label="手机号码"
        prop="phone" label-width="150">
        <u-input :border="false" placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
      </u-form-item>
      <u-form-item label-width="150" label="QQ号码" prop="qq">
        <u-input :border="false" placeholder="请输入QQ号" v-model="model.qq" type="text"></u-input>
      </u-form-item>
      <u-form-item label-width="150" label="意向组织" prop="organization" class="soc">
        <u-input :border="false" placeholder="请输入意向组织" v-model="model.organization" type="text"
          @blur="search(model.organization)"></u-input>
      </u-form-item>
      <u-form-item label-width="150" label="意向部门" prop="department" class="soc">
        <u-input :border="false" placeholder="请输入意向部门" v-model="model.department" type="text"></u-input>
      </u-form-item>
      <u-form-item label-width="150" label="加入理由" prop="reason" class="soc">
        <u-input :border="false" placeholder="请输入加入理由" v-model="model.reason" type="text"></u-input>
      </u-form-item>
      <u-form-item label-width="150" label="自我评价" prop="selfEvaluation" class="soc">
        <u-input :border="false" placeholder="请输入自我评价" v-model="model.selfEvaluation" type="text"></u-input>
      </u-form-item>
      <u-form-item label-width="150" label="主要经历及曾获奖励" prop="experience" class="soc">
        <u-input :border="false" placeholder="请输入主要经历及曾获奖励" v-model="model.experience" type="text"></u-input>
      </u-form-item>
      <u-form-item label-width="150" label="备注" prop="remarks" class="soc">
        <u-input :border="false" placeholder="请输入备注" v-model="model.remarks" type="text"></u-input>
      </u-form-item>
      <u-form-item label="上传图片" prop="photo" label-width="150">
        <u-upload max-count="1" :auto-upload="false" width="160" height="160" ref='photo'></u-upload>
      </u-form-item>
    </u-form>
    <!-- <u-button @click="" class="btn" type="warning">保存草稿</u-button> -->
    <u-button @click="submit" class="btn" type="warning">提交导出</u-button>
  </view>
</template>

<script>
  export default {
    data() {
      let that = this;
      return {
        oid: '',
        title: '',
        departments: [
          '组织部',
          '生活部'
        ],
        model: {
          realName: '',
          sex: '', //性别
          college: '', //学院
          // specialize:'',//专业
          grade: '',
          // study_store:'',	//学号			
          // polity_mask:'',//政治面貌
          qq: '', //qq
          phone: '', //电话
          organization: '', //组织
          department: '', //部门
          reason: '', //理由
          selfEvaluation: '', //自我评价
          experience: '', //经历
          remarks: ''
        },
        rules: {
          realName: [{
              required: true,
              message: '请输入姓名',
              trigger: 'blur',
            },
            {
              min: 3,
              max: 5,
              message: '姓名长度在3到5个字符',
              trigger: ['blur'],
            },
            {
              validator: (rule, value, callback) => {
                return this.$u.test.chinese(value);
              },
              message: '姓名必须为中文',
              trigger: ['change', 'blur'],
            },
          ],
          sex: [{
            required: true,
            message: '请输入性别',
            trigger: 'blur'
          }, ],
          college: [{
            required: true,
            message: '请输入学院',
            trigger: 'blur',
          }],
          grade: [{
            required: true,
            message: '请输入年级',
            trigger: 'blur',
          }],
          phone: [{
              required: true,
              message: '请输入手机号',
              trigger: ['change', 'blur'],
            },
            {
              validator: (rule, value, callback) => {
                // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
                return this.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              // 触发器可以同时用blur和change，二者之间用英文逗号隔开
              trigger: ['change', 'blur'],
            }
          ],
          qq: [{
            required: true,
            message: '请输入QQ号',
            trigger: 'blur'
          }],
          organization: [{
            required: true,
            message: '请输入意向组织',
            trigger: 'blur',

          }],
          department: [{
            required: true,
            message: '请输入意向部门',
            trigger: 'blur',
          }],
          reason: [{
            required: true,
            message: '请输入加入理由',
            trigger: 'blur',
          }],
          experience: [{
            required: true,
            message: '请输入主要经历与曾获奖励',
            trigger: 'blur',
          }],
          selfEvaluation: [{
              required: true,
              message: '请输入自我评价',
              trigger: 'blur',
            },
            {
              min: 5,
              message: '简介不能少于5个字',
              trigger: 'change',
            },
            // 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
            {
              pattern: /^[\u4e00-\u9fa5]+$/gi,
              message: '简介只能为中文',
              trigger: 'change',
            },
          ],
        },
        check: false,
        selectfirList: [{
            text: '男'
          },
          {
            text: '女'
          },
        ],
        selectfirShow: false,
        selectsecList: [{
            text: '大一'
          },
          {
            text: '大二'
          },
          {
            text: '大三'
          },
          {
            text: '大四'
          },
        ],
        selectsecShow: false,
        errorType: ['message'],
      };
    },
    onLoad(option) {
      uni.setNavigationBarTitle({
        title: option.title
      })
      this.oid = option.id
      this.title = option.title
      this.model.org = option.title
      console.log(this.oid, this.title)
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    computed: {
      getToken() {
        return uni.getStorageSync('token')
      }
    },
    methods: {
      submit() {
        let that = this
        console.log(this.model)
        let model = this.model
        let photo = [];
        photo = this.$refs.photo.lists;
        // let imgs = [];
        // imgs = this.$refs.active.lists;
        this.$refs.uForm.validate(valid => {
          if (valid) {
            that.$upfile({
              url: '/organization/resume',
              name: 'photo',
              filePath: photo[0].file.path,
              data: model,
              header: {
                'Authorization': "Bearer " + that.getToken
              },
            }).then(res => {
              // 成功后执行，具体格式待对完接口完善
              console.log(res)
            }).catch(res => {
              // 失败后执行
              console.log(res)
            })
            // imgs.forEach(item => {
            //   that.$upfile({
            //     url: '/organization/resume',
            //     filePath: item.file.path,
            //     name: 'file',
            //     success: (uploadFileRes) => {
            //       // 根据接口具体返回格式   赋值具体对应url
            //       console.log(uploadFileRes.data);
            //     }
            //   });
            // })
            console.log('验证通过');
          } else {
            console.log('验证失败');
          }
        });
      },
      // 点击actionSheet回调
      selectfirCallback(index) {
        uni.hideKeyboard();
        this.model.sex = this.selectfirList[index].text;
      },
      selectsecCallback(index) {
        uni.hideKeyboard();
        this.model.grade = this.selectsecList[index].text;
      },
      // 勾选版权协议
      // checkboxChange(e) {
      // 	this.model.agreement = e.value;
      // },
      // 查询部门接口用于选择，更改表单触发
      search(name) {
        console.log(name)
      }
      //意向部门或可选择，做成下拉框的样式。
    }
  };
</script>

<style scoped lang="scss">
  .wrap {
    padding: 30rpx;
  }

  .agreement {
    display: flex;
    align-items: center;
    margin: 40rpx 0;

  }

  .agreement-text {
    padding-left: 8rpx;
    color: $u-tips-color;
  }

  .soc {}

  .btn,
  button {
    margin: 15rpx;
  }
</style>
